<script >
import store from "@/store";
import {mapActions, mapGetters, mapMutations} from "vuex";
export default {
  data() {
    return {
      size:''
     };
  },
  computed: {
    ...mapGetters(['getDetails','getShowDeadline'])
  },
  methods: {
     ...mapActions([]),
    ...mapMutations(['SET_SHOW_DEADLINE']),
    async copyTextWrite(texts) {
      try {
        // 构建要复制的文本内容
        // let texts = '';
        // el.querySelectorAll('li').forEach((item) => {
        //   texts += `${item.innerText}\n`;
        // });
         let stringify = JSON.stringify(texts);
        // 使用现代剪贴板API
        await navigator.clipboard.writeText(stringify.trim());

        // 显示复制成功反馈
        this.copySuccess = true;
        this.$message.success('信息已复制到剪贴板');

        // 3秒后自动隐藏成功提示
        setTimeout(() => {
          this.copySuccess = false;
        }, 3000);

      } catch (err) {
        console.error('复制失败:', err);
        this.$message.error('复制失败，请手动选择文本复制');

        // 降级方案：创建临时textarea元素进行复制
        const textarea = document.createElement('textarea');
        textarea.value = texts;
        textarea.style.position = 'fixed';
        document.body.appendChild(textarea);
        textarea.select();

        try {
          document.execCommand('copy');
          this.$message.success('信息已复制到剪贴板');
        } catch (e) {
          this.$message.error('复制失败，请手动选择文本复制');
        } finally {
          document.body.removeChild(textarea);
        }
      }
    },
    // 判断是否是日期字段（根据你的实际情况调整）
    isDateField(key) {
      // console.log(key)
      // const dateFields = ['time', 'createTime', 'updateTime', 'date']; // 你的日期字段名列表
      return key.includes('Time');
    },

    // 格式化日期时间
    formatDateTime(value) {
      if (!value) return '';

      // 如果已经是Date对象
      if (value instanceof Date) {
        return this.formatDate(value);
      }

      // 如果是时间戳
      if (typeof value === 'number') {
        return this.formatDate(new Date(value));
      }

      // 如果是ISO格式字符串
      if (typeof value === 'string') {
        const date = new Date(value);
        if (!isNaN(date.getTime())) {
          return this.formatDate(date);
        }
      }

      // 其他情况直接返回原值
      return value;
    },

    // 具体格式化方法 - 2000年11月22日 11时xx分xx秒
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');

      return `${year}年${month}月${day}日 ${hours}时${minutes}分${seconds}秒`;
    }
  },
};
</script>

<template>

  <el-dialog
      title="数据列表"
      width="30%"
      :visible="getShowDeadline"
      center>
    <span>
      <el-radio-group v-model="size">
    <el-radio label="">默认</el-radio>
    <el-radio label="medium">中等</el-radio>
    <el-radio label="small">小型</el-radio>
    <el-radio label="mini">超小</el-radio>
  </el-radio-group>
    <el-descriptions    class="margin-top" title=" " direction="vertical" labelClassName="label_class" :colon="true" extra="显示数据的详细信息" :column="4" :size="size"   border>
<!--    <template slot="extra">-->
<!--      <el-button type="primary" size="small">操作</el-button>-->
<!--    </template>-->
<el-descriptions-item :label="key" v-for="(item, key, index) of this.getDetails" :key="index">
  <template v-if="isDateField(key)">
    {{ formatDateTime(item) }}
  </template>
  <template v-else>
    {{ item }}
  </template>
</el-descriptions-item>

  </el-descriptions>

    </span>

    <span slot="footer" class="dialog-footer">
    <el-button @click="SET_SHOW_DEADLINE(false)">取 消</el-button>
    <el-button type="primary" @click="copyTextWrite(getDetails)">复制内容</el-button>
  </span>
  </el-dialog>
<!--
{ "id": 2, "orderId": 14, "ruleId": 1744072506385, "orderAmount": 68.17, "paymentRate": 0.01,
 "paymentFee": 0.41, "driverTaxRate": 0.1, "driverTaxFee": 5.42, "platformIncome": 13.55, "driverIncome": 48.79,
 "status": 1, "createTime": "2025-04-08 00:35:06", "updateTime": "2025-04-08 00:35:06", "isDeleted": 0 }-->
</template>


<style scoped>
.label_class{
  background-color: cornflowerblue;
}
</style>